<template>
  <div class="change-data">
    <div class="change-content">
      <!-- 修改的头部 -->
      <div class="change-title">
        <p>修改客户数据</p>
        <span @click="quxiaoClick" class="el-icon-close"></span>
      </div>
      <!-- 修改的表单主体 -->
      <el-form
        label-position="right"
        label-width="140px"
        :rules="form_rules"
        :model="changeObj"
        status-icon
        @validate="testElForm"
      >
        <el-form-item label="客户名称：" prop="nickname">
          <el-input v-model="changeObj.nickname"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="contact">
          <el-input v-model="changeObj.contact"></el-input>
        </el-form-item>
        <el-form-item label="QQ：" prop="qq">
          <el-input v-model="changeObj.qq"></el-input>
        </el-form-item>
        <el-form-item label="微信：" prop="weixin">
          <el-input v-model="changeObj.weixin"></el-input>
        </el-form-item>
        <el-form-item label="咨询专业：" prop="zhuanye">
          <el-select v-model="value" placeholder="请选择">
            <el-option label="web前端" value="web前端"></el-option>
            <el-option label="UI设计" value="UI设计"></el-option>
            <el-option label="java开发" value="java开发"></el-option>
            <el-option label="大数据开发" value="大数据开发"></el-option>
            <el-option label="人工智能开发" value="人工智能开发"></el-option>
          </el-select>
          <el-input
            v-model="changeObj.zhuangye"
            style="width: 430px"
          ></el-input>
        </el-form-item>
        <el-form-item label="信息来源：" prop="laoyuan">
          <el-input v-model="changeObj.laiyuan"></el-input>
        </el-form-item>
        <el-form-item label="所在地区：" prop="dizhi">
          <el-input v-model="changeObj.dizhi"></el-input>
        </el-form-item>
        <el-form-item label="选择客服：" prop="kufu">
          <el-select v-model="kufu">
            <el-option
              v-for="item in 5"
              :key="item"
              :label="'客服' + item"
              :value="'客服' + item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="querenClick">确认提交</el-button>
          <el-button @click="quxiaoClick">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { testForm , changeDate } from "../network/api/api";

export default {
  name: "ChangeData",
  props: {
    changeObj: Object,
  },
  data() {
    return {
      value: "",
      kufu: "",
      form_rules: {
        nickname: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        contact: [
          { min: 11, max: 11, message: "手机号格式错误", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 表单的验证
    testElForm(item, boo) {
      if (item == "contact") {
        if (boo) {
          console.log(this.changeObj.contact);
          testForm(this.changeObj.contact, "contact").then((res) => {
            console.log(res.data);
            console.log(this.changeObj);
            if (res.data.code == 200) {
              this.$message("该手机号可以使用");
            } else if (res.data.code == 403) {
              if (res.data.content.id == this.changeObj.id) {
                // this.$message("该手机号可以使用")
              } else {
                this.$message.error("该手机号已存在，请更换尝试");
              }
            }
          });
        }
      }
    },
    // 取消修改
    quxiaoClick(){
      this.$emit('closePage',false)
    },
    // 确认修改
    querenClick(){
      delete this.changeObj.bianhao
      delete this.changeObj.time
      // console.log(this.changeObj)
      changeDate(this.changeObj)
      .then(res => {
        console.log(res)
        this.quxiaoClick()
      })
    }
  },
};
</script>

<style lang="less" scoped>
.change-data {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1000;
  overflow: auto;
  .change-content {
    width: 800px;
    margin: 100px auto;
    background: #fff;
    padding: 20px 20px 100px;
    .change-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40px;
      font-size: 20px;
      span {
        font-size: 18px;
        color: #888;
      }
    }
  }
}
.el-form {
  /deep/ .el-form-item__label {
    font-size: 20px;
  }
}
</style>